<template>
  <div class="dashboard-editor-container">

    <el-row :gutter="20">
      <el-col :span="17" style="width: 70.21%;">
        <div class="top-content" style="padding: 23px 40px 0 40px;">
          <div class="title-content">CPU使用率TOP10</div>
          <div class="card-panel-col">
            <el-row :gutter="20">
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[0]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[1]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[2]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[3]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[4]"/>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[5]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[6]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[7]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[8]"/>
              </el-col>
              <el-col :span="4" style="width: 20%;">
                <gauge-chart :chart-data="gaugeDataList[9]"/>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="7" style="width: 29.78%;">
        <div class="top-content" style="padding: 23px 16px 0 16px;">
          <div class="title-content">最新动态</div>
          <div style="margin-left: 12px;margin-top: 10px;height: 287px;overflow: auto;">
            <div style="width: 100%;margin-bottom: 4px;min-height: 38px;" v-for="latestUpdates in latestUpdatesList">
                <div class="updates-content" :class="statusClass[latestUpdates.healthStatus]">
                  {{ latestUpdates.value }}
                </div>
                <div class="detail-content">
                  <el-button size="mini" type="text" @click="handleDetail(latestUpdates)" >
                    详情
                  </el-button>
                </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe :cell-style="cellStyle">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="主机编号" align="center" prop="hostEncoding" />
      <el-table-column label="数据中心" align="center" prop="dataCenter">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.data_center" :value="scope.row.dataCenter"/>
        </template>
      </el-table-column>
      <el-table-column label="容量使用情况(%)" align="center" prop="capacityUsage" />
      <el-table-column label="任务运行情况" align="center" prop="healthStatus">
        <template slot-scope="scope">
          <dict-tag :class="statusClass[scope.row.healthStatus]" :options="dict.type.status" :value="scope.row.healthStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="告警统计" align="center" prop="alarmStatistics" />
      <!-- <el-table-column label="所属省市" align="center" prop="provinceAndCity" /> -->
      <el-table-column label="日志" align="center" prop="log" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleLog(scope.row)">
            {{ scope.row.log }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleDetail(scope.row)" >
            查看详情
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPagination"
    />

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="open" width="42%" append-to-body>
        <div style="height: 500px;overflow: auto;">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-form-item label="主机编号" prop="hostEncoding">
          <el-input v-model="form.hostEncoding" :disabled="true" placeholder="" />
        </el-form-item>
        <el-form-item label="数据中心" prop="dataCenter">
          <el-select v-model="form.dataCenter" :disabled="true">
            <el-option
              v-for="dict in dict.type.data_center"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务运行情况" prop="healthStatus">
          <el-select v-model="form.healthStatus" :disabled="true">
            <el-option
              v-for="dict in dict.type.status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="容量使用情况(%)" prop="capacityUsage">
          <el-input v-model="form.capacityUsage" :disabled="true" placeholder="" />
        </el-form-item>
        <el-form-item label="告警统计" prop="alarmStatistics">
          <el-input v-model="form.alarmStatistics" :disabled="true" placeholder="" />
        </el-form-item>
        <!-- <el-form-item label="所属省市" prop="provinceAndCity">
          <el-input v-model="form.provinceAndCity" :disabled="true" placeholder="" />
        </el-form-item> -->
        <el-form-item label="创建日期" prop="createTime">
          <el-input v-model="form.createTime" :disabled="true" placeholder="" />
        </el-form-item>
        <el-form-item label="日志" prop="log">
          <el-button size="mini" type="text" @click="handleLog(form)" >
          {{ form.log }}
          </el-button>
        </el-form-item>
        
      </el-form>
        </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 日志 -->
    <el-dialog :title="logTitle" :visible.sync="openLog" width="42%" append-to-body>
      <div style="height: 500px;overflow: auto;">
        <span>{{ logText }}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="openLog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { orderByListManagement, listManagement, getManagement, delManagement, addManagement, updateManagement } from "@/api/system/management";
import { listData } from "@/api/system/dict/data";
import GaugeChart from './dashboard/GaugeChart.vue'

export default {
  name: 'monitoring',
  dicts: ['hardware_status', 'status', 'data_center', 'network_status'],
  components: {
    GaugeChart
  },
  data() {
    return {
      logText: '',
      logTitle: '日志详情',
      // 表单参数
      form: {},
      // 是否显示弹出层
      open: false,
      openLog: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 8,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined
      },
      // 表格数据
      postList: [
        // {
        //   "id": "1", "hostNumber": "20240001", "dataCenter": "北京", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "北京通州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "2", "hostNumber": "20240001", "dataCenter": "江苏", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "江苏泰州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "3", "hostNumber": "20240001", "dataCenter": "浙江", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "浙江衢州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "4", "hostNumber": "20240001", "dataCenter": "江西", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "江西抚州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "5", "hostNumber": "20240001", "dataCenter": "湖北", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "湖北鄂州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "6", "hostNumber": "20240001", "dataCenter": "湖南", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "湖南郴州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "7", "hostNumber": "20240001", "dataCenter": "福建", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "福建漳州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
        // {
        //   "id": "8", "hostNumber": "20240001", "dataCenter": "安徽", "capacityUsage": "99.7%", "operationStatus": "正常", "alarmStatistic": "警告警告",
        //   "provinceCity": "安徽亳州", "journal": "2", "createDate": "2024-03-12 14:16:34",
        // },
      ],
      gaugeDataList: [],
      latestUpdatesList: [
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报", id: "1649" },
        // {value: "警告：主机br-001于2024-05-01 10:29:21发出警报", id: "1649" },
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报", id: "1649" },
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报", id: "1649" },
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报", id: "1649" },
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报", id: "1649" },
        // {value: "警告：北京数据中心主机br-arm-001于2024-05-01 10:29:21CPU使用率超过90%发出警报警报警报警报警报警报警报警报警报警报", id: "1649" }
      ],
      dictsDataCenter: [],
    }
  },
  created() {
    this.getDicts()
    this.getList();
    this.getOrderByList()
  },
  methods: {
    getDicts() {
      let params = {
        pageNum: 1,
        pageSize: 100,
        dictType: 'data_center',
      }
      listData(params).then((res) => {
        this.dictsDataCenter = res.rows
      })
    },
    /** CPU使用率TOP10 */
    getOrderByList() {
      this.loading = false;
      orderByListManagement(this.queryParams).then(response => {
        this.gaugeDataList = response.rows.map((item) => {
          return {
            value: item.capacityUsage,
            name: '主机：' + item.hostEncoding
          }
        });
        this.loading = false;
      });
    },
    /** 查询列表 */
    getList() {
      this.loading = false;
      listManagement(this.queryParams).then(response => {
        this.postList = response.rows;
        this.total = response.total;
        this.latestUpdatesList = []
        // 最新动态
        let obj = {}
        response.rows.forEach((item) => {
          let statu = ''
          if(item.healthStatus == '0') {
            statu = '正常'
          }else if(item.healthStatus == '1') {
            statu = '延时'
          }else if(item.healthStatus == '2') {
            statu = '警告'
          }else if(item.healthStatus == '3') {
            statu = '异常'
          }else if(item.healthStatus == '4') {
            statu = '故障'
          }
          // if(item.capacityUsage > 90) {
            obj = {
              ...item,
              value: `${statu}：${this.$getDict(item.dataCenter,this.dictsDataCenter)}${item.hostEncoding}于${item.createTime}CPU使用率${item.capacityUsage >= '90'?'超过':'为'} ${item.capacityUsage}% ${item.capacityUsage >= '90'?'发出警报':''}`,
              id: item.id
            }
            this.latestUpdatesList.push(obj)
          // }
        })
        this.loading = false;
      });
    },
    getPagination() {
      listManagement(this.queryParams).then(response => {
        this.postList = response.rows;
        this.total = response.total;
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.configId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === "任务运行情况" && row.row.operationStatus === "正常") {
        return 'color: #3DD4A7';
      }
      if (row.column.label === "容量使用情况" && row.row.operationStatus > "90%") {
        return 'color: #E59696';
      }
    },
    handleDetail(rows) {
      this.form = rows
      this.open = true
    },
    handleEdit(row) {

    },
    handleLog(rows) {
      getManagement(rows.extend2).then((res) => {
        this.logText = res
        this.logTitle = rows.log + '日志详情'
        this.openLog = true
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.openLog = false
      this.reset();
    },
    
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
.top-content {
  height: 356px !important;
  background-color: #fff;
  border: none;
  box-shadow:rgba(0, 0, 0, 0.35) 2px 2px 3px 0px;
  margin-bottom: 20px;
}
.title-content {
  width: 100%;
  color: #333333;
  font-size: 20px;
  font-weight:700;
}
.updates-content {
  // color: #333333;
  font-size: 14px;
  font-weight: 400;
  text-overflow:ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 76%;
  float: left;
}
.detail-content {
  line-height: 38px;
  font-size: 14px;
  font-weight: 400;
  color: #008FE0;
  width: 28px;
  float: right;
  margin-right: 20px;
}
.pagination-container {
  min-height: 52px;
}


@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }

}

</style>
